<template>
  <div class="login-container">
    <header-bar>登陆页面</header-bar>
    <el-button @click="addRoutesClick">添加路由</el-button>

    <template v-for="item in GetAsyncRoutes">
       <router-link :key="item.path" :to="item.path">{{item.path}}</router-link>
    </template>
    <el-table :data="tableList">
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="city" label="city"></el-table-column>
      <el-table-column prop="age" label="age"></el-table-column>
      <el-table-column prop="address" label="address"></el-table-column>
    </el-table>

    <el-button @click="createExcelEvent">生成excel表格</el-button>
  </div>
</template>

<script>
/* eslint-disable */
import { mapActions, mapGetters } from 'vuex'
import ExportJsonExcel from 'js-export-excel'
export default {
  name: 'App',
  data() {
    return {
      tableList: [
        {
          id: 0,
          city: '北京',
          age: 12,
          address: '1223'
        },
        {
          id: 1,
          city: '上海',
          age: 12,
          address: '1223'
        },
        {
          id: 2,
          city: '重庆',
          age: 12,
          address: '1223'
        },
        {
          id: 3,
          city: '山西',
          age: 12,
          address: '1223'
        },
        {
          id: 4,
          city: '晋城',
          age: 12,
          address: '1223'
        }
      ],
       tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
  },
  computed: {
    ...mapGetters('login', ['GetAsyncRoutes'])
  },
  methods: {
    ...mapActions('login', ['GeneratorRoutes']),
    addRoutesClick() {
      this.GeneratorRoutes()
    },
    createExcelEvent() {
      let option={}
      option.fileName='1803B表格'
      option.datas=[
        {
          sheetData: this.tableList,
          sheetName:'表格一',
          sheetFilter: ["id", "city", "age", "address"],
          sheetHeader: ["ID", "城市", "年龄", "地址"],
          columnWidths: [10, 10, 10, 20],
        },
        {
          sheetData: this.tableData,
          sheetName:'表格二',
          sheetFilter: [ "date", "name", "address"],
          sheetHeader: ["日期", "名字", "地址"],
          columnWidths: [10, 10, 10, 20],
        }
      ]
      var toExcel = new ExportJsonExcel(option);
      toExcel.saveExcel()
    }
  },
  mounted() {
  }
}
/* eslint-disable */
</script>

<style>
</style>
